<template>
  <view class="container">
    <float-button name="foodsApproval" :showInstruction="false" />

    <view class="tag-view" v-if="canteenList.length">
      <button
        v-for="(v, i) in canteenList"
        :key="i"
        class="btn"
        :class="{ light: canteen == i, l: i == 0, r: i == 1 }"
        type="primary"
        @click="canteen = i"
      >
        {{ v.name }}
      </button>
    </view>

    <view class="listBox">
      <uni-collapse accordion v-model="accordionVal" @change="change">
        <uni-collapse-item
          v-for="item in categories"
          :key="item.id"
          :title="item.name"
        >
          <view
            v-for="(v, i) in item.children"
            :key="v.foodsApprovalId"
            class="content"
          >
            <view class="t">
              <view class="l">{{ v?.foodName }}</view>
              <view class="r"><view class="point" />{{ i + 1 }}</view>
            </view>
            <view class="b">
              <view class="bItem">
                <view class="name">主要原材用量</view>
                <view class="value">{{ v?.mainRawMaterialUsage || '--' }}</view>
              </view>
              <view class="bItem">
                <view class="name">{{ canteenList[canteen].name }}</view>
                <view class="first-class">
                  <view class="value"
                    >预售重量：{{ v?.preSaleWeight || '--' }}</view
                  >
                  <view class="value"
                    >预售价： {{ v?.preSalePrice || '--' }}</view
                  >
                </view>
              </view>
              <view class="bItem">
                <view class="name">后勤主管部门</view>
                <view class="first-class">
                  <view class="value"
                    >审批重量：{{ v?.approvalWeight || '--' }}</view
                  >
                  <view class="value"
                    >审批价： {{ v?.approvalPrice || '--' }}</view
                  >
                </view>
              </view>
              <view class="bItem">
                <view class="name">盛装餐具及标准（见附图）</view>
                <view class="value">
                  <image
                    v-if="v.imgUrl"
                    class="img"
                    :src="baseIp + v.imgUrl"
                    mode="widthFix"
                    @click="previewSingle(baseIp + v.imgUrl)"
                  />
                  <view v-else class="value">--</view>
                </view>
              </view>
              <view class="bItem">
                <view class="name">备注</view>
                <view class="value">{{ v?.remark || '--' }}</view>
              </view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <view class="previewImg" v-if="showPreviewImgUrl">
      <view class="close-icon" @click="showPreviewImgUrl = null">×</view>
      <image class="img" :src="showPreviewImgUrl" mode="widthFix" />
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
// import canteenList1 from '@/static/mock/canteenList1.json';
// import canteenList2 from '@/static/mock/canteenList2.json';
import { listAll, select } from '@/api/dish';
import config from '@/common/config';
export default {
  components: {
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      canteenList: [],
      canteen: 0, // 食堂
      accordionVal: '0',
      categories: [],
      baseIp: config.baseIp, // 本地
      // baseIp: config.url,
      showPreviewImgUrl: null,
    };
  },
  onLoad(query) {
    this.getSelect();
  },
  onShow() {},
  watch: {
    canteen(value) {
      this.getList(this.canteenList[value].partnerShopId);
    },
  },
  methods: {
    getSelect() {
      select().then((res) => {
        this.canteenList = res.data || [];
        this.getList(res.data[0]?.partnerShopId);
      });
    },
    getList(partnerShopId) {
      uni.showLoading({ title: '加载中' });
      listAll({ partnerShopId }).then((res) => {
        this.categories = this.handleTree(res.data || []);
        console.log(' this.categories', this.categories);
        uni.hideLoading();
      });
    },
    handleTree(data) {
      const treeMap = new Map();
      const result = [];

      // 先创建所有父节点
      data.forEach((item) => {
        if (!treeMap.has(item.nameId)) {
          treeMap.set(item.nameId, {
            id: `parent_${item.nameId}`, // 关键：为父节点创建唯一ID
            nameId: item.nameId,
            name: item.name,
            isParent: true, // 标记父节点
            children: [],
          });
          result.push(treeMap.get(item.nameId));
        }

        // 创建子节点（保留完整数据）
        const child = {
          ...item,
          id: item.foodsApprovalId, // 子节点使用自己的ID
          parentId: `parent_${item.nameId}`, // 关键：关联父节点
          nameId: null,
        };
        treeMap.get(item.nameId).children.push(child);
      });

      return result;
    },
    change(e) {},
    // 预览单张图片
    previewSingle(url) {
      console.log('url', url);
      // uni.clearStorageSync();
      // uni
      //   .previewImage({
      //     current: url, // 当前显示图片
      //     urls: [url], // 所有图片集合
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      this.showPreviewImgUrl = url;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - var(--window-top));
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .tag-view {
    padding: 20rpx;
    text-align: right;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-top: 10rpx;
    .l {
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .r {
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      background: #6bb0ff;
      &::after {
        border: none;
      }
      &.light {
        background: #5293ff;
      }
    }
  }
  .listBox {
    flex: 1 1 auto;
    overflow-y: auto;
    position: relative;
    margin-top: 20rpx;
    padding: 0 20rpx;
    :deep(.uni-collapse-item) {
      background: #ffffff;
      letter-spacing: 4rpx;
      position: relative;
      .uni-collapse-item__title {
        margin-bottom: 20rpx;
        .uni-collapse-item__title-text {
          font-size: 35rpx;
        }
      }
      &:first-child {
        padding-top: 20rpx !important;
      }
      .uni-collapse-item__wrap {
        max-height: 65vh !important;
        overflow-y: auto;

        .uni-collapse-item__wrap-content {
          display: flex;
          flex-direction: column;
          align-items: end;
        }
      }
      .content {
        width: 100%;
        border-radius: 20rpx;
        border: 1px solid rgba(0, 0, 0, 0.1);
        // box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 20rpx;
      }
      .t {
        padding: 24rpx 34rpx 16rpx;
        border-bottom: 2rpx dashed #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l {
          font-size: 32rpx;
          color: #333333;
          line-height: 38rpx;
        }
        .r {
          font-size: 32rpx;
          color: #505050;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .point {
            width: 12rpx;
            height: 12rpx;
            margin-right: 6rpx;
            background: #ffb93b;
            border-radius: 50%;
          }
        }
      }
      .b {
        padding: 26rpx 34rpx 32rpx;
        .bItem {
          margin-bottom: 16rpx;
          display: flex;
          align-items: baseline;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            width: 40%;
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
          }
          .first-class {
            display: flex;
            flex-direction: column;
            flex: 1;
          }
          .value {
            flex: 1;
            font-size: 28rpx;
            color: #505050;
            line-height: 33rpx;
            text-align: justify;
            .img {
              display: inline-block;
              width: 200rpx;
              height: auto;
            }
          }
        }
      }
      .status {
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        padding: 8rpx 20rpx;
        background: #409eff;
        border-radius: 20rpx;
        position: absolute;
        top: 106rpx;
        right: 42rpx;
        &.warn {
          background: #e6a23c;
        }
      }
    }
  }
  .previewImg {
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
    .img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-height: 100%;
      max-width: 100%;
    }
    .close-icon {
      position: absolute;
      box-sizing: border-box;
      top: 0px;
      right: 0px;
      width: 60px;
      height: 44px;
      padding: 6px;
      line-height: 32px;
      font-size: 26px;
      color: white;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
